<template>
	<div class="content">
		<div class="pageSearchView">
			<el-form :inline="true" :model="searchParam" class="demo-form-inline" label-width="auto" style="width: 100%">
				<el-row>
					<el-col :span="4">
						<el-form-item label="车间/产线">
							<el-tree-select v-model="searchParam.groupId" :data="workRoomList" check-strictly clearable
															:props="{ children: 'sonList', label: 'orgName', value: 'id' }" style="width: 200px"
															@change="organizationIdChange" />
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="设备" prop="equipmentList">
							<el-select v-model="searchParam.deviceIds" placeholder="请选择设备" clearable filterable style="width: 200px">
								<el-option v-for="item in equipmentData" :key="item.id" :label="item.equipmentName"
													 :value="item.deviceId">
									<span style="float: left">{{ item.equipmentName }}</span>
									<span style="float: right; color: var(--el-text-color-secondary); font-size: 13px;">
										{{ item.equipmentCode }}
									</span>
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-form-item label="状态">
							<el-select v-model="searchParam.status" placeholder="请选择状态" clearable style="width: 150px">
								<el-option v-for="(item, index) of statusList" :key="index" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-radio-group v-model="searchParam.type">
							<el-radio value="6">当班</el-radio>
							<el-radio value="5">4小时内</el-radio>
							<el-radio value="4">当日</el-radio>
						</el-radio-group>
					</el-col>
					<el-col :span="4">
						<el-form-item>
							<el-button type="primary" :icon="Search" @click="getList()">查询</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</div>

		<div class="pageTableView" style="background: #E6EAF0">
			<div class="tableContent">
				<div v-if="infoList.length > 0"
						 style="height: calc(100vh-700px);display: flex;flex-wrap: wrap;justify-content: flex-start">
					<div v-for="(item,index) of infoList" :key="index" style="width: 276px;padding:  10px 5px;cursor: pointer"
							 @click="toDetail(item)">
						<div class="col-items">
							<div class="col-top">
								<div class="device-no" :title="item.deviceNo">{{ item.deviceNo }}</div>
								<div class="status-div" :style="{ background: statusColor[item.status] }">
									<span>{{ statusText[item.status] }}</span>
									<el-icon style="margin-left: 5px">
										<ArrowRight />
									</el-icon>
								</div>
							</div>
							<div class="circle">
								<el-row>
									<el-col :span="14"
													style="padding-top: 10px;display: flex;align-items: center;justify-content: center">
										<el-progress type="dashboard" :stroke-width="10" :percentage="item.startRate">
											<template #default="{ percentage }">
												<span class="percentage-value">{{ item.startRate }}%</span>
												<br>
												<span class="percentage-label">开动率</span>
											</template>
										</el-progress>
									</el-col>
									<el-col :span="10" style="display: flex;align-items: center;justify-content: center">
										<div class="time-container">
											<div v-for="(time, key) in timeLabels" :key="key" class="time-item">
												<span>{{ item[time.key] }}</span>
												<span style="font-weight: 700;margin-left: 5px" :class="time.class">{{ time.label }}</span>
											</div>
										</div>
									</el-col>
								</el-row>
							</div>
						</div>
					</div>
				</div>
				<el-row v-else style="display: flex;align-items: center;justify-content: center">暂无数据</el-row>
			</div>

			<div class="pagePagination">
				<el-pagination background v-model:current-page="paginationParams.current"
											 v-model:page-size="paginationParams.pageSize" layout="total, sizes, prev, pager, next"
											 :total="pageTotal"
											 @size-change="handleSizeChange"
											 :page-sizes="[18,36,108,216,648]"
											 @current-change="handleCurrentChange" />
			</div>
		</div>
	</div>
</template>
<script setup>
import axiosInstance from '@/utils/http/api';
import { Search } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { onMounted, ref } from 'vue';
import { useRouter } from 'vue-router';

onMounted(() => {
	getList();
	getOptions();
});

const paginationParams = ref({ pageSize: 18, pageNum: 1 });
const pageTotal = ref(0);
const equipmentData = ref([]);
const searchParam = ref({ type: '4' });
const infoList = ref([]);
const workRoomList = ref([]);

const statusColor = {
	1: 'rgb(30,190,102)',
	2: 'rgb(255,185,0)',
	5: 'rgb(253,22,60)',
	4: 'rgb(119,119,119)'
};

const statusText = {
	1: '运行',
	2: '待机',
	5: '告警',
	4: '关机'
};

const statusList = ref([
	{ value: 1, label: '运行' },
	{ value: 2, label: '待机' },
	{ value: 5, label: '告警' },
	{ value: 4, label: '关机' }
]);

const timeLabels = [
	{ key: 'runTime', label: '运行', class: 'running' },
	{ key: 'standbyTime', label: '待机', class: 'standby' },
	{ key: 'waringTime', label: '告警', class: 'alarm' },
	{ key: 'shutdownTime', label: '关机', class: 'close' }
];

const getList = () => {
	const param = {
		...paginationParams.value,
		...searchParam.value
	};
	axiosInstance.get('/api/navigation/dmsDevice/getDeviceRealtimeStatus', { params: param })
		.then(res => {
			infoList.value = res.data.records;
			pageTotal.value = res.data.total;
		});
};


const router = useRouter();

const toDetail = (row) => {
	router.push('/scheduling/equipmentLiveStatusdetail?deviceId=' + row.deviceId + '&deviceNo=' + row.deviceNo);
};

const getOptions = () => {
	axiosInstance.post('/api/basedataOrganization/getAll', {})
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			workRoomList.value = res.data;
		});
};

const handleSizeChange = (e) => {
	paginationParams.value.pageSize = e;
	paginationParams.value.pageNum = 1;
	getList();
};

const handleCurrentChange = (e) => {
	paginationParams.value.pageNum = e;
	getList();
};

const organizationIdChange = (e) => {
	axiosInstance.post('/api/basedataEquipment/getPage', { organizationId: e, current: 1, pageSize: 9999 })
		.then(res => {
			if (res.code !== 200) {
				ElMessage.error(res.message);
				return false;
			}
			// 过滤出包含 deviceId 字段的记录
			equipmentData.value = res.data.records.filter(record => record.deviceId);
		});
};

</script>
<style scoped lang="less">
.col-items {
	display: flex;
	flex-direction: column;
	height: 205px;
	border-radius: 10px;
	background: #fff;
	padding: 10px;
	box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s;
}

.col-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 5px 0;
}

.status-div {
	width: auto;
	padding: 5px 10px;
	color: #fff;
	border-radius: 5px;
	display: flex;
	align-items: center;
}

.device-no {
	font-size: 16px;
	font-weight: bold;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	flex: 1;
}

.circle {
	flex-grow: 1;
}

.el-progress {
	transform: scale(0.9);
	transform-origin: center;
}

.time-container {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.time-item {
	display: flex;
	align-items: center;
	gap: 5px;
}


.close {
	color: rgb(119, 119, 119);
}

.alarm {
	color: rgb(253, 22, 60);
}

.standby {
	color: rgb(255, 185, 0);
}

.running {
	color: rgb(30, 190, 102);
}

.percentage-value {
	display: block;
	margin-top: 10px;
	font-size: 25px;
	font-weight: 700;
}

.percentage-label {
	display: block;
	font-size: 15px;
}
</style>
